<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>悦动科技 vue.js 组件基础</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button v-on:click="warn('Form cannot be submitted yet.', $event)">
            Submit
        </button>

        <blog-post title="My journey with Vue"></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>
    </div>
    <div id="blog-post-demo">
        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
    </div>
    <div id="blog-posts-events-demo">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="postFontSize += 0.1"></blog-post>
        </div>
        <alert-box>
                Something bad happened xxxxx.
        </alert-box>
    </div>

    <script>
        Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="countSum">You clicked me {{ count }} times.</button>',
            methods: {
                countSum: function () {
                    this.count++;
                    console.log("tCount: " + this.count);
                }
            }
            /* 一个问题, click里写成 函数，会无法显示template; 怎么改成函数的形势?*/
        })

        Vue.component('blog-post', {
            props: ['title'],
            template: '<h3>{{ title }}</h3>'
        })

        new Vue({
            el: '#components-demo',
            methods: {
                countSum: function () {

                },
                warn: function (message, event) {
                    // 现在我们可以访问原生事件对象
                    if (event) event.preventDefault()
                    alert(message)
                }
            }
        })

    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue' },
                { id: 2, title: 'Blogging with Vue' },
                { id: 3, title: 'Why Vue is so fun' },
            ]
        }
    })

    //通过事件向父级组件发送消息
    Vue.component('blog-post', {
        props: ['post'],
        template: `<div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>`
    })

    //通过插槽(slot)分发内容
    Vue.component('alert-box', {
                template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>`
    })

    new Vue({
        el: '#blog-posts-events-demo',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue', content: '---content111-----' },
                { id: 2, title: 'Blogging with Vue', content: '---content222-----' },
                { id: 3, title: 'Why Vue is so fun', content: '---content333-----' },
            ],
            postFontSize:1
        }
    })
    </script>
</body>

</html>